import React, { useState, useEffect } from 'react';
import { useLocation} from 'react-router'
import { Modal, Button, message } from 'antd';
import ShippAdd from '../ShippAdd';
import '../../OrderMag/index.css'
import './index.css'
import axios from 'axios';
import { aUrl } from '../../../../static/axios_url';
export default function ShippMag(props) {
    const [site, setSite] = useState([])
    //
    const location =useLocation()
   
    let [onF, setOnf] = useState(false)//监听添加地址弹出框
    useEffect(() => {
        console.log(location.state);
        axios.post(aUrl + '/mycenter/mysite', {
            u_id: 1,
        }).then(res => {
            let data = res.data
            //给每个数据加一个状态值
            // for (var i = 0; i < data.length; i++) {
            //     data[i].onF = false
            // }
            setSite(data)
        })
    }, [onF])

    //修改添加地址
    const [isModalVisible, setIsModalVisible] = useState(false);
    function showModal() {//控制模态框显示隐藏
        setIsModalVisible(true);
    };
    //添加地址成功后 点击返回按钮
    function handleCancel() {
        //添加地址后 让状态值取反 从而达到页面刷新添加数据的效果
        onF=!onF
        setOnf(onF)
        setIsModalVisible(false);
    }
    //设为默认地址
    function setdef(id, i) {
        return () => {
            axios.post(aUrl + '/mycenter/defaultSite', {
                id: id,
            }).then(res => {
                // console.log(res);
                if (res.data.code === 1) {
                    let neWsite = [...site]
                    neWsite.forEach((v) => {
                        v.muo = 0
                    })
                    neWsite[i].muo = 1;
                    setSite(neWsite)
                    message.success('设置成功')
                }
            })
        }
    }
    //删除地址
    function deldef(id,index) {
        return () => {
            axios.post(aUrl + '/mycenter/delSite', {
                site_id: id,
            }).then(res => {
                if (res.data.code === 1) {
                    let newSite = [...site]
                    newSite.splice(index,1)
                    setSite(newSite)
                    message.success('删除成功')
                }
            })
        }
    }

    return (
        <div style={{ position: 'relative' }}>
            <h3 className='om-h3'>收货人信息</h3>
            <Button style={{ width: 100, height: 30, backgroundColor: '#F08200', border: 'none', position: 'absolute', left: 1180, top: 15, borderRadius: 5 }} type="primary" onClick={showModal}>
                使用新地址
            </Button>
            {/* <button className='osm-addb'>使用新地址</button> */}
            <ul className='osm-ul'>
                {site.map((site, i) => {
                    return (
                        <li key={site.site_id} className='osm-li'>
                            <input type="radio" name="a" id="" />
                            <span>{site.name}</span>
                            <span>{site.area}</span>
                            <span>{site.site}</span>
                            <span>{site.phone}</span>
                            <i>{site.muo ? '默认地址' : ''}</i>
                            <u onClick={deldef(site.site_id, i)}>删除</u>
                            <u onClick={showModal}>修改</u>
                            <em onClick={setdef(site.site_id, i)}>{site.muo ? '' : '设为默认地址'}</em>
                        </li>
                    )
                })}

                {/* <li className='osm-li'>
                    <input type="radio" name="a" id="" />
                </li> */}
            </ul>
            <>
                {/* 修改添加地址模态框 */}
                <Modal visible={isModalVisible} onCancel={handleCancel} width={650}
                    footer={[
                        <Button key="back" onClick={handleCancel}>
                            返回页面
                        </Button>,
                    ]}>
                    {/* 模态框自定义内容 */}
                   <ShippAdd go={props.go}/>
                </Modal>
            </>
        </div>
    )
}
